[iOS 7] アプリ開発入門 1からはじめるiOS7 – StoryBoardで画面遷移

iOS 7 特集

#iOS

小室啓

2013.09.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

画面遷移を実装する

複数の画面で構成するアプリケーションの場合は、当然画面遷移が必要です。
今回は、Storyboardを利用して親画面から子画面へ遷移する実装を行います。

目標

親画面のボタンをタップすると子画面へ遷移させます

実装

Viewの中にボタンが一つだけ配置されています
スクリーンショット_2013-09-09_11.44.46

配置されているView Controllerの隣にView Controllerを追加します
スクリーンショット_2013-09-09_12.00.17

はじめの画面のボタンをCtrl を押しながらドラッグし、先ほど追加したView Controllerに接続させます

ダイアログが表示されるのpushを選択します
スクリーンショット 2013-09-09 12.04.32

Actionが設定されました
スクリーンショット 2013-09-09 12.04.44

これでよい気がするので、実行してみます
Screenshot 2013.09.09 12.09.31

エラー！

ボタンを押した瞬間にアプリケーションが停止してしまいました。

スクリーンショット 2013-09-09 12.09.53

2013-09-09 12:09:47.137 Hello Story Board[1088:60b] *** Terminating app due to uncaught exception 'NSGenericException', reason: 'Push segues can only be used when the source controller is managed by an instance of UINavigationController.'
*** First throw call stack:
(0x2ebf5f8b 0x38bc96af 0x3157ad35 0x310fe71f 0x310fe6bf 0x310fe699 0x310e9b9f 0x310fe10f 0x310fdde1 0x310f8e6d 0x310cda6d 0x310cc271 0x2ebc117b 0x2ebc064b 0x2ebbee3f 0x2eb29cd7 0x2eb29abb 0x3356f2db 0x3112e121 0x533b9 0x390edab7)
libc++abi.dylib: terminating with uncaught exception of type NSException

Push segues can only be used when the source controller is managed by an instance of UINavigationController.

「PushセグエはUINavigationControllerによって管理されたsource controllerのみ利用可能」のようなことが書いてありますね。
どうやらUINavigationControllerというクラスが必要なようです

親画面から子画面へ遷移させるなど、階層的な画面構成を持つ場合に必要なクラスのようです。
UINavigationController
呼び出し元の画面へ戻るためのボタンなども自動的に生成してくれるようです

UINavigationControllerを追加する

先ほどのStoryBoardにNavigationControllerを追加します
スクリーンショット_2013-09-09_12.24.23

NavigationControllerとTableViewが追加されるので、TableViewを削除します。さらに消えかけの矢印があるので、こちらは追加したNavigationControllerへ移動します。
これはアプリ起動時にどれを起動するかを示す矢印のようです。
スクリーンショット_2013-09-09_12.27.01

NavigationControllerから、Ctrlを押しながら、CmViewController へドラッグします

ダイアログが表示されます。Relationship Segue > root view controller をクリックします
スクリーンショット 2013-09-09 12.28.50

NavigationControllerが設定されました
スクリーンショット 2013-09-09 12.33.50

各Componentのプロパティ設定の確認

それぞれどのような設定になっているのかを見てみます

Navigation Controller

下矢印（？）のアイコンを選択します
Is Initial View Controller という項目にチェックが入っています
スクリーンショット_2013-09-09_12.37.20

一番右の横矢印を選択します
小さいですが、root view controller - * Cm View Controller と設定されています
スクリーンショット_2013-09-09_12.37.29